<template>
	<view>
		<image src="../../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
			v-if="menu_list.length==0"></image>
		<view class="menu-list-view" v-else>
			<view class="item-view" v-for="(item,i) in _menu_list" :key="item.id" @click="gotoMenuDetail(item.id)">
				<image :src="item.imgSrc">
				</image>

				<view class="right-box">
					<text class="name-text">{{item.name}}</text>
					<view class="materials-row">
						配方:
						<text class="material-text">{{item.recipe}}</text>
					</view>
					<view class="tags-row">
						<text class="tag" v-for="(tag,i2) in item.tags" :key="i2">{{tag}}</text>
					</view>
					<view class="rate-row">
						<uni-rate size="15" :readonly="true" :value="item.rate" />
						<text>{{item.rate}}分</text>
					</view>
				</view>
			</view>
			<view class="load-more" style="padding-bottom: 15px;">
				<uni-load-more color="#007AFF" :status="status" :content-text="contentText" />
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				obj: '',
				menu_list: [],
				// 显示的消息条数
				num: 6,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多了'
				}
			};
		},

		computed: {
			// 要显示的菜谱
			_menu_list() {
				return this.menu_list.slice(0, this.num)
			}
		},

		onLoad(options) {
			this.menu_list = JSON.parse(options.menu_list)
			if (this.menu_list.length <= this.num)
				this.status = 'noMore'
		},

		onReachBottom() {
			this.loadMore()
		},

		methods: {

			// 请求

			// 跳转
			gotoMenuDetail(menuId) {
				uni.navigateTo({
					url: '/pagesSub/pageMenu/menu_detail/menu_detail?menuId=' + menuId
				})
			},

			// 事件处理
			// 加载更多
			loadMore() {
				if (this.status == 'more') {
					this.status = 'loading'
					setTimeout(() => {
						this.num = this.num + 6
						if (this.num < this.menu_list.length)
							this.status = 'more'
						else this.status = 'noMore'
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss">
	.menu-list-view {
		padding: 5%;
		height: 100vh;

		.item-view {
			margin-bottom: 15px;
			display: flex;
			font-size: 16px;
			justify-content: space-between;

			>image {
				border-radius: 20rpx;
				height: 230rpx;
				width: 45%;
			}

			.right-box {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.name-text {
					font-size: 22px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.materials-row {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #4e5969;
				}

				.tags-row {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 1px 0;
					color: #ff8d1f;

					.tag {
						border: 1px solid #ff8d1f;
						margin-right: 10px;
					}
				}

				.rate-row {
					display: flex;
					font-size: 12px;
				}
			}
		}
	}
</style>